<script setup>
import { ref, computed } from 'vue'
// 导入相关接口
import { getOrderPageApi, getorderDetailListApi, statusOrderApi } from '@/api/backend/orders.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const currentPage = ref(1)
const pageSize = ref(5)
const disabled = ref(false)
const total = ref(0)
const tableData = ref([])
const number = ref('')
const beginTime = ref('')
const endTime = ref('')
const datetime = ref()
const orderDetailList = ref()
const handleSizeChange = (val) => {
    getOrderPage();
}
const handleCurrentChange = (val) => {
    getOrderPage();
}
const typeMapping = {
    1: '待付款',
    2: '待上餐',
    3: '已上餐',
    4: '已完成',
    5: '已取消'
}
const transformedTableData = computed(() => {
    return tableData.value.map(item => {
        return {
            ...item,
            status: typeMapping[item.status],
            amount: '￥' + item.amount
        }
    })
})
const getOrderPage = async () => {
    const params = {
        page: currentPage.value,
        pageSize: pageSize.value,
        number: number.value,
        beginTime: beginTime.value,
        endTime: endTime.value
    }
    let result = await getOrderPageApi(params);
    if (result.code === 1) {
        tableData.value = result.data.records || []
        total.value = result.data.total
        return;
    } else {
        return;
    }
}
getOrderPage();
const datetimechange = async () => {
    beginTime.value = datetime.value == null ? null : datetime.value[0];
    endTime.value = datetime.value == null ? null : datetime.value[1];
}
const getorderDetailList = async (id) => {
    const params = {
        orderId: id
    }
    let result = await getorderDetailListApi(params);
    if (result.code === 1) {
        orderDetailList.value = result.data;
        return;
    } else {
        return;
    }
}
const openMessageBox = (i, s) => {
    ElMessageBox.confirm(
        '确定将订单状态更改至下一步?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 修改订单状态的代码
            switch (s) {
                case '待付款':
                    s = 1
                    break;
                case '待上餐':
                    s = 2
                    break;
                case '已上餐':
                    s = 3
                    break;
                case '已完成':
                    ElMessage.info('已完成订单无法修改')
                    return;
                case '已取消':
                ElMessage.info('已取消订单无法修改')
                    return;
            }
            statusOrder(i, s)
        })
        .catch(() => {
            ElMessage.info('取消修改')
        })
}
const statusOrder = async (i, s) => {
    const params = {
        id: i,
        status: s + 1
    }
    let result = await statusOrderApi(params);
    if (result.code === 1) {
        ElMessage.success(result.data)
        getOrderPage();
        return;
    } else {
        return;
    }
}
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>订单明细</span>
                <el-text size="large">订单号:</el-text>
                <el-input v-model="number" placeholder="订单号" clearable style="width: 33%" />
                <el-text size="large">时间范围:</el-text>
                <div>
                    <el-config-provider :locale="locale">
                        <el-date-picker v-model="datetime" type="datetimerange" start-placeholder="开始时间"
                            end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD"
                            time-format="hh:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" @visible-change="datetimechange()" />
                    </el-config-provider>
                </div>
                <el-button type="info" round @click="getOrderPage();">查询</el-button>
            </div>
            <!-- 点击详情后的弹窗--显示订单的详细信息 -->
            <el-dialog v-model="orderDetailList" align-center width="67%">
                <el-table :data="orderDetailList" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }"
                    :header-cell-style="{ 'text-align': 'center' }">
                    <el-table-column label="名称" prop="name" width="180px"></el-table-column>
                    <el-table-column label="图片" prop="image" align="center">
                        <template #default="{ row }">
                            <el-image style="width: auto; height: 40px; border:none;cursor: pointer;"
                                :src="`/api/common/download?name=${row.image}`">
                                <template #error>
                                    <img src="@\assets\noImg.png" style="width: auto; height: 40px; border:none;">
                                </template>
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="口味" prop="dishFlavor">
                        <template #default="{ row }">
                            {{ (row.dishFlavor == null ? '无' : row.dishFlavor) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="数量" prop="number"></el-table-column>
                    <el-table-column label="金额" prop="amount"></el-table-column>
                    <template #empty>
                        <el-empty description="没有数据" />
                    </template>
                </el-table>
            </el-dialog>

        </template>
        <el-table :data="transformedTableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column label="订单号" prop="number" width="180px"></el-table-column>
            <el-table-column label="订单金额" prop="amount"></el-table-column>
            <el-table-column label="订单状态" prop="status"></el-table-column>
            <el-table-column label="客户名称" prop="userName"></el-table-column>
            <el-table-column label="客户手机" prop="phone"></el-table-column>
            <el-table-column label="下单时间" prop="orderTime"></el-table-column>
            <el-table-column label="操作" width="150px">
                <template #default="{ row }">
                    <el-button type="warning" plain size="small" @click="
                        openMessageBox(row.id, row.status)"><el-text size="small">状态</el-text></el-button>
                    <el-button type="info" plain size="small" @click="
                        getorderDetailList(row.id)"><el-text size="small">详情</el-text></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <div>
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :disabled="disabled"
                :page-sizes="[5, 15, 30]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.el-pagination {
    margin-top: 10px;
    justify-content: center;
}

//
</style>